<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-input
        v-model.trim="listQuery.userId"
        clearable
        placeholder="用户id"
      />

      <el-select
        v-model="listQuery.status"
        clearable
        filterable
        placeholder="状态"
      >
        <el-option label="待处理" :value="0"/>
        <el-option label="已阅" :value="1"/>
        <el-option label="已回复" :value="2"/>
      </el-select>

      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="创建起始时间"
        end-placeholder="创建结束时间"
        value-format="yyyy/MM/dd"
        @change="daterangeChanged"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >重置</el-button>
    </div>

    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 300px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column
          align="center"
          label="用户ID"
          prop="userId"
        >

          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.userId" />
            <span>{{ userAddress[row.userId] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="昵称"
          prop="userInfoVo.nickname"
        />

        <el-table-column
          align="center"
          label="性别"
        >
          <template slot-scope="{row}">{{ row.userInfoVo.gender | gender }}</template>
        </el-table-column>

        <el-table-column
          align="center"
          label="地区"
          prop="userId"
        >
          <template slot-scope="{ row }">
            {{row.userInfoVo.province + "-" + row.userInfoVo.city}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="反馈类型"
          prop="types"
        />

        <el-table-column
          align="center"
          label="反馈内容"
          prop="describe"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="反馈图片"
        >
          <template slot-scope="{row}">
            <el-image
              v-for="(url,index) in row.photos" :key="index"
              slot="img"
              style="width: 100px; height: 100px;"
              :src="url"
              :preview-src-list="row.photos"
            />
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="用户邮箱"
          prop="emailAddress"
        >
        </el-table-column>

        <el-table-column
          align="center"
          label="状态"
          prop="reportStatus"
        >
          <template slot-scope="{row}">{{ row.reportStatus === 0 ? '处理中' : '以处理' }}</template>
        </el-table-column>

        <el-table-column
          align="center"
          label="回复内容"
          prop="reply"
        >
        </el-table-column>

        <el-table-column
          align="center"
          label="创建时间"
        >
          <template slot-scope="{row}">{{ row.createAt | parseTime }}</template>
        </el-table-column>

        <el-table-column
          align="center"
          label="修改时间"
        >
          <template slot-scope="{row}">{{ row.updateAt | parseTime }}</template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          width="160"
        >
          <template slot-scope="{row}">
            <el-button
              v-if="row.reportStatus === 0"
              type="primary"
              size="mini"
              @click="onHandleReport(row, 1)"
            >审阅</el-button>
            <el-button
              v-if="row.reportStatus === 0 || row.reportStatus === 1"
              type="warning"
              size="mini"
              @click="onHandleReport(row, 2)"
            >回复</el-button>
          </template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.pageNum"
        :limit="listQuery.pageSize"
        :total="total"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange2"
        @handleCurrentChange="handleCurrentChange2"
      />
    </div>
  </div>
</template>

<script>
  import TablePagination from '@/components/TablePagination'
  import DialogForbidAccount from './components/DialogForbidAccount'
  import ImageViewer from '@/components/ImageViewer'

  import { xhrFeedbackRecord, xhrFeedbackDeal } from '@/api/account'
  import { getCountryItem } from '@/filters'

  export default {
    name: 'accuseCoupleBack',
    components: { TablePagination, DialogForbidAccount, ImageViewer },
    data() {
      return {
        list: null,
        total: 0,
        daterangeValue: '',
        listQuery: {
          page: 1,
          limit: 100,
          userId: null,
          status: null,
          startTime: null,
          endTime: null,
        },
        listLoading: true,
        userAddress: {},
        countryCodeItem: getCountryItem()
      }
    },
    created() {
      this.doSearch()
    },
    methods: {
      doSearch() {
        if (this.listQuery.userId && !/^\d*$/.test(this.listQuery.userId)) {
          this.$message.warning('用户ID只能是数字')
          this.listLoading = false
          return
        }
        xhrFeedbackRecord(this.listQuery)
          .then(resp => {
            this.list = resp.data.list
            this.total = resp.data.total
            if (resp.data.userAddress){
              this.userAddress = resp.data.userAddress
            }
            this.listLoading = false
          })
          .catch(err => {
            this.$message.error(err)
            this.listLoading = false
          })
      },
      onHandleReport(row, status){
        if (status === 2){
          const data = {status: status, id: row.id}
          this.$prompt('请输入回复内容', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({ value }) => {
            data["reply"] = value
            this.handleReportResult(data)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });
          });
        }else {
          const data = {status: status, id: row.id}
          this.handleReportResult(data)
        }
      },
      handleReportResult(data) {
          xhrFeedbackDeal(data)
          .then(resp => {
            this.$message.success("成功")
            this.doSearch()
          })
          .catch(err => {
            this.$message.error(err)
            this.listLoading = false
          })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .photos-list {
    display: flex;
    flex-wrap: wrap;
    img{
      width: 100px;
      margin-bottom: 10px;
    }
  }
</style>
